<template>
  <div class="tableSweeper">
    <el-card class="version-log-management-page__header">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="$t('tableSweeper.tableSweeper_01')" name="1" />
        <el-tab-pane :label="$t('tableSweeper.tableSweeper_02')" name="2" />
        <el-tab-pane :label="$t('tableSweeper.tableSweeper_03')" name="3" />
      </el-tabs>
    </el-card>
    <el-card class="version-log-management-page__body">
      <dataRecord v-if="activeName === '1'" />
      <usageRecords v-if="activeName === '2'" />
      <deviceStatus v-if="activeName === '3'" />
    </el-card>
  </div>
</template>

<script>
import dataRecord from './components/dataRecord.vue';
import usageRecords from './components/usageRecords.vue';
import deviceStatus from './components/deviceStatus.vue';
export default {
  name: 'tableSweeper',

  data() {
    return {
      activeName: '1',
    };
  },
  components: {
    dataRecord,
    usageRecords,
    deviceStatus,
  },

  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.tableSweeper {
  width: 100%;
  height: 100%;
  .version-log-management-page__header {
    height: 60px;
    padding: 5px;

    ::v-deep .el-card__body {
      overflow: hidden;
      padding: 0px !important;
    }
  }

  .version-log-management-page__body {
    height: calc(100% - 60px - 20px);
    margin-top: 20px;
  }

  ::v-deep .el-tabs__nav {
    width: 100%;

    > div {
      width: 33.3%;
      text-align: center;
    }
  }
}
</style>
